'use strict'
import { App, View } from '../../../component'
import style from './css.css'
import RechargeList from './rechargeList'
import Choose from './choose'
import setTitle from '../../../config/setTitle'
import { observer, inject } from 'mobx-react'

@inject('user') @observer class Charge extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isShowRecharge: -1
    }
  }
  componentDidMount () {
    setTitle('充值')
  }
  _renderRechargeList () {
    const rechargeList = [{
      money: 6,
      gold: 600
    },
    {
      money: 30,
      gold: 3000,
      presented: 100
    },
    {
      money: 98,
      gold: 9800,
      presented: 400
    },
    {
      money: 298,
      gold: 29800,
      presented: 1500
    },
    {
      money: 588,
      gold: 58800,
      presented: 3500
    }
    ]
    const arr = rechargeList.map((item, index) => {
      return <RechargeList key={index} index={index + 1} list={item} transferShow={(isShowRecharge) => this.transferShow(isShowRecharge)} />
    })
    return arr
  }

  _renderChoose () {
    const { isShowRecharge } = this.state
    if (isShowRecharge > 0) {
      return <Choose money={isShowRecharge} transferShow={() => this.transferShow(-1)} />
    }
  }

  transferShow (isShowRecharge) { this.setState({ isShowRecharge }) }
  render () {
    const { balance } = this.props.user
    return (
      <App noSysScroll={false}>
        <View className={style.RechargeWrpa}>
          <View className={style.Recharge}>
            <View className={style.blance}>
              <View>余额</View>
              <View className={style.blanceMoney}>{balance || '0'}</View>
            </View>
            <View className={style.chooseText}>请选择购买项</View>
            <View className={style.chooseBlance}>
              {this._renderRechargeList()}
            </View>
          </View>
          {this._renderChoose()}
        </View>
      </App>
    )
  }
}

export default Charge
